iT邦幫忙

2025 iThome 鐵人賽

DAY 1
0
Modern Web

手刻部落格,從設計到部署的實戰攻略系列 第 1

來吧,親手刻個部落格!

  • 分享至 

  • xImage
  •  

現在還要寫部落格嗎?

就算在 AI 能讓我們輕易獲取高品質的資料、甚至富有洞見資訊的現在(2025-09),我們所閱讀過的內容仍然沒辦法自動轉變成自己的「知識」。

就如同費曼學習法所強調的:

如果你不能用自己的話簡單解釋,就是還沒真正掌握。
— 理查.費曼

不知道大家有沒有遇過這樣的狀況,覺得自己已經完全理解了某個概念,但直到真的將其寫下來、或是說出來,才發現卡在某個地方,意識到自己其實並沒有懂的這麼透徹。

我想,這就是我們該寫作的原因。

而將知識書寫在部落格中,又能更進一步加深理解,因為你得讓想表達的內容更容易被讀懂。不同於在私人的筆記中能夠隨意留下草稿,部落格畢竟是公開的嘛,我們就得花更多精力讓文章保有一定品質,不然豈不是砸了自己的招牌?

所謂「用輸出倒逼輸入」,我想,這就是我們該寫部落格的原因。

為何要手刻部落格?

市面上早已經有 Medium、Vocus 這類一鍵發佈的平台,那為什麼還要自己動手刻呢?

如果只是初試啼聲,這些平台仍然是相當推薦的。但是當身為工程師的我們如果想搞點事,很快就會遇到一些限制,例如排版的選擇少、互動元件受限等等。

之所以選擇手刻部落格,就是因為能擁有完全的彈性:可以選擇自己熟悉的技術棧、自由配置版型及內容。除了文章的發表之外,我同時也想做個人化的主題樣式,甚至在網站中放置能互動的小程式。

為了滿足這些需求,即便選用 WordPress、Hexo 等常見的部落格框架,依舊需要大量修改和客製化。有時這樣做反而更麻煩,像是我曾在 Hexo 中自製頁面瀏覽量的功能,最終讓我魔改個半死。

「手刻」並不代表重新發明輪子、從零開始寫框架,而是組合好現有的工具,最大程度客製出自己的工程展示平台。

來吧,親手刻個部落格!

本系列文將聚焦在建造部落格當中的種種選擇,討論這麼做、這麼選的背後原因是什麼;雖然能造出部落格的框架很多,但是我會挑選其中一種技術棧:以 Astro 為核心框架建立靜態部落格。

文中不會有詳盡的 step-by-step 教學,也不會有太多拿來就能用的程式碼,而會專注在講述這些技術的背景知識和觀念,與其他類似技術的比較。

舉例來說,我們會討論為什麼要選擇 Astro 而非更多人使用的 WordPress?也會聊到靜態網站的內容搜尋原理,與資料庫的搜尋比較有何不同。

接下來的系列文大致可以分成三個部分:部落格框架的選擇、需求到設計的規劃、實戰開發及部署。涵蓋的內容包含:

  • 挑選部落格的要素
  • 撰寫需求、驗收條件
  • 部落格響應式版面設計
  • 建立自有的「設計系統」
  • Astro + Tailwind CSS 實戰演練
  • 網站測試流程
  • 靜態網站嵌入「瀏覽計數器」及「站內搜尋」功能
  • 網站能見度:SEO + OGP
  • 架站平台選擇及部署

涵蓋職能橫跨 Designer、Frontend Engineer,以及部分的 Backend 與 DevOps。

準備好了嗎?來吧,讓我們親手刻出獨具自己風格的部落格!


下一篇
部落格類型:該選開放還是封閉、動態還是靜態?
系列文
手刻部落格,從設計到部署的實戰攻略9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言